<template>
  <view class="edit-info">
    <view class="avatar-box">
      <view class="avatar"><image :src="state.user.userInfo.avatar"></image></view>
      <view class="avatar-list">
        <view class="avatar-item" @tap="setUserAvatar(index)" v-for="(item, index) in state.user.systemAvatars" :key="index"><image :src="item"></image></view>
      </view>
    </view>

    <view class="cu-list menu text-left solid-top">
      <view class="cu-item arrow" @tap="toggleEditNickNameModal(true)">
        <view class="content"><text class="text-black">昵称</text></view>
        <view class="action" v-text="state.user.userInfo.nickName || '未设置昵称'"></view>
      </view>
    </view>
    <view class="cu-form-group solid-top">
      <view class="title">性别</view>
      <picker @change="onChangeSex" :value="state.user.userInfo.sex" :range="sexs">
        <view class="picker">{{ sexs[state.user.userInfo.sex] }}</view>
      </picker>
    </view>
    <view class="cu-list menu text-left solid-top" @tap="toggleEditSignatureModal(true)">
      <view class="cu-item arrow">
        <view class="content"><text class="text-black">个性签名</text></view>
        <view class="action">{{ state.user.userInfo.signature || "未设置" }}</view>
      </view>
    </view>
    <modal title="修改昵称" :show.sync="showEditNickNameModal">
      <form @submit="onSubmitEditNickName">
        <view class="form-content">
          <view class="input-inner bg-gray round">
            <input name="nickName" :value="state.user.userInfo.nickName" placeholder="请输入昵称" maxlength="10" placeholder-style="font-size:24upx;" type="text" />
          </view>
          <view class="btn"><button form-type="submit" class="cu-btn bg-blue block round">确 定</button></view>
        </view>
      </form>
    </modal>
    <modal title="修改个性签名" :show.sync="showEditSignatureModal">
      <form @submit="onSubmitEditSignature">
        <view class="form-content">
          <view class="textarea-inner bg-gray"><textarea name="signature" :value="state.user.userInfo.signature"></textarea></view>
          <view class="btn"><button form-type="submit" class="cu-btn bg-blue block round">确 定</button></view>
        </view>
      </form>
    </modal>
  </view>
</template>

<script>
import baseMixins from "@/utils/mixins";
import modal from "@/components/modal/index";
import uniApp from "@/utils/uni-app";
export default {
  mixins: [baseMixins],
  data() {
    return {
      showEditNickNameModal: false,
      showEditSignatureModal: false,
      sexs: ["保密", "男", "女"]
    };
  },
  components: {
    modal
  },
  methods: {
    __init() {
      return this.$store.dispatch("user/getSystemAvatars");
    },
    setUserAvatar(index) {
      this.$store
        .dispatch("user/setAvatar", {
          avatar: this.$store.state.user.systemAvatars[index]
        })
        .then(_ => {
          console.warn({ _ });
          uniApp.toast(_.data.msg || "设置成功");
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "设置失败");
        });
    },
    toggleEditNickNameModal(bool) {
      this.showEditNickNameModal = bool;
    },
    onSubmitEditNickName({ detail }) {
      this.$store
        .dispatch("user/setNickName", detail.value)
        .then(_ => {
          uniApp.toast(_.data.msg || "设置成功");
          this.showEditNickNameModal = false;
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "设置失败");
          this.showEditNickNameModal = false;
        });
    },
    onChangeSex({ detail }) {
      this.$store
        .dispatch("user/setSex", { sex: detail.value })
        .then(_ => {
          uniApp.toast(_.data.msg || "设置成功");
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "设置失败");
        });
    },
    toggleEditSignatureModal(bool) {
      this.showEditSignatureModal = bool;
    },
    onSubmitEditSignature({ detail }) {
      this.$store
        .dispatch("user/setSignature", detail.value)
        .then(_ => {
          uniApp.alert(_.data.msg || "设置成功");
          this.showEditSignatureModal = false;
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "设置失败");
          this.showEditSignatureModal = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-info {
  overflow: hidden;
  background-color: #ffffff;
  .avatar-box {
    padding: 40upx;
    position: relative;
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      border-bottom: 0.5px solid #ddd;
      border-radius: inherit;
      content: " ";
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      pointer-events: none;
    }
  }

  .avatar {
    margin: 0 auto;
    margin-top: 20upx;
    width: 200upx;
    height: 200upx;
    border-radius: 200upx;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .avatar-list {
    width: 96%;
    margin: 20upx auto;
    margin-top: 30upx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .avatar-item {
      width: 100upx;
      height: 100upx;
      border-radius: 100upx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .form-content {
    padding: 0 30upx 30upx 30upx;
    .input-inner {
      height: 60upx;
      margin-bottom: 30upx;
      input {
        height: 100%;
        height: 100%;
        padding: 0 30upx;
      }
    }
    .textarea-inner {
      height: 120upx;
      margin-bottom: 30upx;
      border-radius: 6upx;
      textarea {
        height: 100%;
        width: 100%;
        padding: 10upx 30upx;
      }
    }
  }
}
</style>
